<template>
  <div>
    <Row :gutter="20">
      <i-col :xs="12" :md="8" :lg="4" v-for="(infor, i) in inforCardData" :key="`infor-${i}`" style="height: 120px;padding-bottom: 10px;">
        <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
          {{infor.count}}
          <p>{{ infor.title }}</p>
        </infor-card>
      </i-col>
    </Row>
    <Row>
    </Row>

    <!--S统计表-->
    <Card shadow style="position: relative;">
      <template slot="title">
        <h4>每日数据</h4>
        <DatePicker
          class="date-limit"
          type="daterange"
          placeholder="选择日期"
          :options="date_picker_option"
          @on-change="dateChange"
        >
        </DatePicker>
      </template>
      <statistics :date="select_date" @init="statisticsInit"></statistics>
    </Card>
    <!--E统计表-->
  </div>
</template>

<script>
import InforCard from '_c/info-card'
import Statistics from './components/statistics'
import { mapState } from 'vuex'
import store from '@/store'
export default {
  name: 'home',
  components: {
    InforCard,
    Statistics
  },
  data () {
    return {
      // 系统配置
      system: {},
      inforCardData: [
        { title: '用户总数', icon: '_manager', count: 0, color: '#2d8cf0' },
        { title: '新增用户', icon: 'md-person-add', count: 0, color: '#ED4014' },
        { title: '红包总数', icon: '_zongshu', count: 0, color: '#E46CBB' },
        { title: '今日红包', icon: '_hongbao1', count: 0, color: '#19be6b' },
        { title: '总收入', icon: '_yuqizongshouru', count: 0, color: '#ed3f14' },
        { title: '今日收入', icon: '_jinrishouru', count: 0, color: '#ff9900' }
      ],
      // 时间组件配置
      date_picker_option: {},
      // 选择的时间
      select_date: []
    }
  },
  mounted () {
    this.getInfor()
    this.getSystem()
      .then(() => {
        return this.showNotice()
      })
      .then(() => {
        this.date_picker_option = {
          disabledDate: (date) => {
            return (date < new Date(this.system.install_time * 1000)) || date > new Date()
          }
        }
      })
  },
  computed: {
    ...mapState({
      system_notice: state => state.app.system_notice
    })
  },
  methods: {
    /**
     * 获取Infor数据
     */
    getInfor () {
      this.$get('home/infor')
        .then((res) => {
          let { code, data } = res.data
          if (code === 0) {
            data.forEach((item, index) => {
              this.$set(this.inforCardData[index], 'count', item)
            })
          }
        })
    },
    /**
     * 时间段改变
     */
    dateChange (res) {
      this.select_date = res
    },
    /**
     * 一周内数据表统计时间初初始换完成，返回时间
     */
    statisticsInit (date) {
      this.select_date = date
    },
    /**
     * 获取系统配置
     */
    getSystem () {
      return this.$get('system/find', {
        data: ['notice']
      })
        .then((res) => {
          let { code, data } = res.data
          if (code === 0) {
            this.system = data
          }
        })
    },
    /**
     * 显示后台系统公告
     */
    showNotice () {
      if (this.system.notice_show === '1' && !this.system_notice) {
        store.commit('setSystemNotice', true)
        this.$Modal.info({
          title: '公告',
          content: `<div style="max-height: 400px;overflow-y: auto;">${this.system.notice}</div>`,
          width: 800,
          height: 400,
          scrollable: true
        })
      }
    }
  }
}
</script>

<style lang="less">
.count-style{
  font-size: 50px;
}
.date-limit{
  position: absolute;
  left: 80px;
  top:5px;
  width: 300px;
}
</style>
